<template>
  <view class="container">
    <!-- 账号信息面板 -->
    <view class="account-info-panel" :class="{ 'no-account': !currentAccount }">
      <view class="account-info-content">
        <view class="account-display">
          <text class="account-nickname">{{ currentAccount ? (currentAccount.nickname || '未设置昵称') : '未登录' }}</text>
          <text class="account-id" v-if="currentAccount">修仙ID: {{ currentAccount.roleId }}</text>
          <text class="account-id" v-else>请先登录账号</text>
        </view>
        <button class="switch-account-btn" @click="navigateToAccountManager">
          <text class="button-icon">👤</text>
          {{ currentAccount ? '切换账号' : '去登录' }}
        </button>
      </view>
    </view>

    <!-- 功能模块网格 -->
    <view class="module-grid">
      <!-- 灵珠抢夺模块 -->
      <view class="module-card" @click="navigateToPlunder">
        <view class="module-icon">💫</view>
        <view class="module-content">
          <text class="module-title">灵珠抢夺</text>
          <text class="module-desc">自动抢夺其他修仙者的灵珠</text>
          <view class="module-status" :class="{ 'status-running': isPlunderRunning }">
            {{ isPlunderRunning ? '运行中' : '未运行' }}
          </view>
        </view>
      </view>

      <!-- 矿主查询模块 -->
      <view class="module-card" @click="navigateToMineOwner">
        <view class="module-icon">🔍</view>
        <view class="module-content">
          <text class="module-title">矿主查询</text>
          <text class="module-desc">查询灵矿矿主信息</text>
        </view>
      </view>

      <!-- 矿主排行模块 -->
      <view class="module-card" @click="navigateToMineRank">
        <view class="module-icon">🏆</view>
        <view class="module-content">
          <text class="module-title">矿主排行</text>
          <text class="module-desc">查看灵矿矿主排行榜</text>
        </view>
      </view>

      <!-- 更多模块占位 -->
      <view class="module-card placeholder">
        <view class="module-icon">🔮</view>
        <view class="module-content">
          <text class="module-title">敬请期待</text>
          <text class="module-desc">更多功能正在开发中...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 状态管理
const currentAccount = ref(null);
const isPlunderRunning = ref(false);

// 加载当前账号信息
const loadCurrentAccount = async () => {
  try {
    const currentAccountId = uni.getStorageSync('current_account_id');
    const accounts = uni.getStorageSync('plunder_accounts') || [];
    
    if (currentAccountId) {
      const account = accounts.find(acc => acc.roleId === currentAccountId);
      if (account) {
        currentAccount.value = account;
      } else {
        currentAccount.value = null;
      }
    } else if (accounts.length > 0) {
      currentAccount.value = accounts[0];
      uni.setStorageSync('current_account_id', accounts[0].roleId);
    } else {
      currentAccount.value = null;
    }
  } catch (e) {
    console.error('加载当前账号信息失败:', e);
    currentAccount.value = null;
  }
};

// 检查灵珠抢夺运行状态
const checkPlunderStatus = () => {
  isPlunderRunning.value = uni.getStorageSync('plunder_running') || false;
};

// 页面导航
const navigateToPlunder = () => {
  uni.navigateTo({
    url: '/pages/index/index'
  });
};

const navigateToMineOwner = () => {
  if (!currentAccount.value) {
    uni.showToast({
      title: '请先登录账号',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: '/pages/mine/mineOwner'
  });
};

const navigateToMineRank = () => {
  if (!currentAccount.value) {
    uni.showToast({
      title: '请先登录账号',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: '/pages/mine/mineRank'
  });
};

const navigateToAccountManager = () => {
  uni.switchTab({
    url: '/pages/saoma/saoma'
  });
};

// 生命周期钩子
onMounted(() => {
  loadCurrentAccount();
  checkPlunderStatus();
  
  // 监听账号切换事件
  uni.$on('account-switched', async (account) => {
    currentAccount.value = account;
  });
  
  // 监听运行状态变化
  uni.$on('plunder-status-changed', (status) => {
    isPlunderRunning.value = status;
  });
  
  // 定期检查运行状态
  const statusCheckInterval = setInterval(checkPlunderStatus, 5000);
  
  onUnmounted(() => {
    clearInterval(statusCheckInterval);
    uni.$off('account-switched');
    uni.$off('plunder-status-changed');
  });
});
</script>

<style>
.container {
  padding: 24rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  min-height: 100vh;
  max-width: 1200rpx;
  margin: 0 auto;
  box-sizing: border-box;
}

.account-info-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.account-info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rpx;
}

.account-display {
  flex: 1;
  min-width: 0;
}

.account-nickname {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-id {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.switch-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 24rpx;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
  height: 56rpx;
  min-width: 140rpx;
}

.switch-account-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.button-icon {
  margin-right: 8rpx;
  font-size: 28rpx;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280rpx, 1fr));
  gap: 24rpx;
  padding: 8rpx;
}

.module-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  gap: 20rpx;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.module-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.module-card.placeholder {
  opacity: 0.8;
  cursor: default;
}

.module-card.placeholder:hover {
  transform: none;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.module-icon {
  font-size: 48rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  flex-shrink: 0;
}

.module-content {
  flex: 1;
  min-width: 0;
}

.module-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}

.module-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: block;
}

.module-status {
  font-size: 22rpx;
  color: #909399;
  background: rgba(144, 147, 153, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  display: inline-block;
}

.module-status.status-running {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.account-info-panel.no-account {
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed #dc3545;
}

@media screen and (min-width: 768px) {
  .container {
    padding: 32rpx;
  }

  .module-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .module-card {
    padding: 32rpx;
  }

  .module-icon {
    font-size: 56rpx;
    width: 96rpx;
    height: 96rpx;
  }

  .module-title {
    font-size: 32rpx;
  }

  .module-desc {
    font-size: 26rpx;
  }

  .module-status {
    font-size: 24rpx;
  }
}
</style> 